<script setup lang="ts">
import {computed, h, onMounted, ref} from "vue";
import {
  ReadOutlined,
  SmileOutlined,
  TeamOutlined,
  UsergroupAddOutlined,
  CommentOutlined,
  RobotOutlined,
  DatabaseOutlined
} from '@ant-design/icons-vue';
import {type MenuProps, message} from "ant-design-vue";
import {useLoginUserStore} from "@/stores/useLoginUserStore.ts";
import {useRouter} from "vue-router";
import {logout} from "@/api/userController.ts";

const current = ref<string[]>(['blog']);
const originItems = [
  {
    //唯一标识
    key: '/blog',
    icon: () => h(ReadOutlined),
    //菜单项显示文本
    label: '博客',
    // 悬停显示文本
    title: '博客',
  },
  {
    key: '/match',
    icon: () => h(TeamOutlined),
    label: '匹配好友',
    title: '寻找厚米',
  },
  {
    key: '/team',
    icon: () => h(UsergroupAddOutlined),
    label: '组队',
    title: '寻找厚米们',
  },
  {
    key: '/chat',
    icon: () => h(CommentOutlined),
    label: '消息',
    title: '厚米的消息',
  },

  {
    key: '/AI/chat',
    icon: () => h(RobotOutlined),
    label: 'AI对话',
    title: '向AI厚米请教',
  },
  {
    key: '/admin/infoManage',
    icon: () => h(DatabaseOutlined),
    label: '信息管理',
    title: '管理厚米',
    children: [
      {
        key: '/admin/userManage',
        icon: () => h(TeamOutlined),
        label: '用户管理',
        title: '管理厚米',
      },
      {
        key: '/admin/teamManage',
        icon: () => h(UsergroupAddOutlined),
        label: '队伍管理',
        title: '管理厚米们',
      },
      {
        key: '/admin/blogManage',
        icon: () => h(ReadOutlined),
        label: '博客管理',
        title: '管理厚米的博客',
      },
    ],
  },
  {
    key: 'codebo',
    icon: () => h(SmileOutlined),
    label: h('a', {href: 'https://gitee.com/camellia_codebo', target: '_blank'}, 'codebo'),
    title: '你博',
  },
]

const loginUserStore = useLoginUserStore();
const router = useRouter();
const items = computed(() => filterMenus(originItems))
const defaultAvatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
const doMenuClick = ({key}) => {
  router.push({
    path: key
  })
}

router.afterEach((to) => {
  current.value = [to.path]
})

//过滤掉普通用户的admin选项
const filterMenus = (menus = [] as MenuProps['items']) => {
  return menus.filter(item => {
    if (item?.key?.startsWith('/admin')) {
      if (!loginUserStore.loginUser || loginUserStore.loginUser.userRole !== 'admin') {
        return false
      }
    }
    return true;
  })
}
//个人中心
const doSelf = async () => {
  const {id} = loginUserStore.loginUser
  await router.push({
    path: `/user/${id}`
  })
}
//退出登录
const doLogout = async () => {
  const res = await logout()
  if (res.data.code === 0 && res.data.data) {
    message.success("退出登录成功")
    loginUserStore.setLoginUser({
      userName: '未登录',
    })
    await router.push({
      path: '/login',
      replace: true,
    })
  } else {
    message.error("退出登录失败" + res.data.message)
  }
}
onMounted(() => {

})
</script>

<template>
  <div id="GlobalHeader">
    <!--    网站logo栏-->
    <a-row :wrap=false>
      <a-col flex="200px">
        <div class="tittle-bar">
          <img src="@/assets/logo.jpg" class="logo" alt="logo"/>
          <div class="tittle">厚米匹配</div>
        </div>
      </a-col>
      <!--      顶部功能栏-->
      <a-col flex="auto">
        <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" @click="doMenuClick"/>
      </a-col>
      <!--      个人信息栏-->
      <a-col flex="120px">
        <div class="user-login-status">
          <div v-if="loginUserStore.loginUser.id">
            <a-dropdown>
              <a-space>
                <a-avatar :src="loginUserStore.loginUser.userAvatar||defaultAvatar"  :size="45"/>
                {{loginUserStore.loginUser.username}}
              </a-space>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="doSelf">
                    个人中心
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">每日签到</a>
                  </a-menu-item>
                  <a-menu-item @click="doLogout">
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div v-else>
            <a-button type="primary" href="/login">登录</a-button>
          </div>

        </div>
      </a-col>
    </a-row>
  </div>

</template>

<style scoped>
#GlobalHeader {
  .logo {
    height: 48px;
  }

  .tittle-bar {
    display: flex;
    align-items: center;

    .tittle {
      margin-left: 15px;
    }
  }
}
</style>
